<template>
  <div class="singerd" v-loading="singerartist==''">
    <div class="singerd-header" v-show="singerartist!=''">
      <div class="singer-header-title">歌手</div>
      <div class="singer-header-info">
        <div class="singer-header-info-left"><img v-lazy="singerartist.img1v1Url"></div>
        <div class="singer-header-info-right">
          <div class="singer-header-info-name">{{singerartist.name}}</div>
          <div class="singer-header-info-text">
            <p><i class="el-icon-bicycle"></i>单曲数：<span>{{singerartist.musicSize}}</span></p>
            <p><i class="el-icon-truck"></i>专辑数：<span>{{singerartist.albumSize}}</span></p>
            <p><i class="el-icon-ship"></i>MV数：<span>{{singerartist.mvSize}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="singerd-container" v-show="singerartist!=''">
      <el-tabs value="1">
        <el-tab-pane label="热门单曲" name="1">
          <el-scrollbar>
            <div class="singerd-hot">
              <div class="playall">
                 <div><i class="el-icon-video-play"></i>播放全部({{this.singerdhot.length}})</div>
                 <div></div>
                 <div><i class="el-icon-finished"></i>选择</div>
              </div>
              <ul>
                <li class="detail-music-list" v-for="(item,index) in singerdhot" :key="index">
                  <div class="music-list-index">{{index+1 | filterNumber}}</div>
                  <div class="music-list-detail"><i class="el-icon-star-off"></i></div>
                  <div class="music-list-song">{{item.name}}</div>
                  <div class="music-list-singer ellipsis">
                    <p class="ellipsis"><span v-for="(sing,index) in item.ar" :key="index">{{sing.name}}<i v-show='index!=item.ar.length-1'>/</i>&nbsp;</span></p>
                  </div>
                  <div class="music-list-album ellipsis">
                    <p class="ellipsis">{{item.al.name}}</p>
                  </div>
                  <div class="music-list-time">{{item.dt | filterTime}}</div>
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="2">
          <el-scrollbar>
            <div class="singerd-zj">
              <ul>
                <li class="ellipsis" v-for="item in singerdzj" :key="item.id">
                   <img v-lazy="item.picUrl">
                   <p class="ellipsis">{{item.name}}</p>
                   <p class="ellipsis">{{item.publishTime | filterDate}}</p>
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="MV" name="3">
          <el-scrollbar>
            <div class="singerd-mv">
              <ul>
                <li class="ellipsis" v-for="item in singerdmv" :key="item.id">
                  <div class="singerd-mv-img">
                    <img v-lazy="item.imgurl">
                    <div class="playnum"><i class="el-icon-headset"></i>
                      <span v-if="item.playCount>100000">{{item.playCount | filterPlayCount}}</span>
                      <span v-if="item.playCount<100000">{{item.playCount}}</span>
                    </div>
                  </div>
                  <p class="ellipsis">{{item.name}}</p>
                  <p class="ellipsis">{{item.publishTime}}</p>
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="4">
          <el-scrollbar>
            <div class="singerd-detail">
              <span>{{singerartist.name}}简介</span>
              <p>{{singerddetailjj}}</p>
              <ul>
                <li v-for="(item,index) in singerddetail" :key="index">
                  <span>{{item.ti}}</span>
                  <p v-for="item in item.txt">{{item}}</p>
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="相似歌手" name="5">
          <el-scrollbar>
            <div class="singerd-alike">
              <span class="nonetext">暂无相似歌手</span>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import {getSingerdHot,getSingerdZJ,getSingerdMV,getSingerdDetail,getSingerdAlike} from '@/api/api'
  export default {
    data() {
      return {
        singerId: 0,
        singerartist:[], //歌手信息
        singerdhot:[],  //歌手热门单曲
        singerdzj:[],  //歌手专辑
        singerdmv:[],  //歌手mv
        singerddetail:[], //歌手详情
        singerddetailjj:[],  //歌手简介
        singerdalike:[],  //相似歌手
      }
    },
    methods: {

      _getsinger(id){
        // 单曲
        getSingerdHot(id).then(res => {
          if(res.status == 200){
            this.singerartist = res.data.artist;
            this.singerdhot = res.data.hotSongs;
            // console.log(this.singerdhot);
          }
        });
        // 专辑
        getSingerdZJ(id).then(res => {
          if(res.status == 200){
            this.singerdzj = res.data.hotAlbums;
            // console.log(this.singerdzj);
          }
        });
        // mv
        getSingerdMV(id).then(res => {
          if(res.status == 200){
            this.singerdmv = res.data.mvs;
            // console.log(this.singerdmv);
          }
        });
        // 详情
        getSingerdDetail(id).then(res => {
          if(res.status == 200){
            this.singerddetailjj = res.data.briefDesc;
            this.singerddetail = res.data.introduction;
            this.singerddetail.forEach(item=>{
              item.txt = item.txt.split(/[\n,]/g);  //根据回车正则表达式，把字符串分割成数组
            })

            // console.log(this.singerddetailjj);
            // console.log(this.singerddetail);

          }
        });
        // 相似歌手
        // getSingerdAlike(id).then(res => {
        //   if(res.status == 200){
        //     this.singerdalike = res.data;
        //     console.log(this.singerdalike);
        //   }
        // });

      },
    },
    activated(){
     this.singerartist = [];
     this.singerdhot = [];
     this.singerdzj = [];
     this.singerdmv = [];
     this.singerddetail = [];
     this.singerdalike = [];
     this.singerId = this.$route.query.id;
     setTimeout(()=>{
       this._getsinger(this.singerId);
     },1500);

    }
  }
</script>
<style scoped="scoped">
  .singerd {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .singerd-header {
    width: 100%;
    height: auto;
    background: linear-gradient(#ccc 1%, #fafafc 99%);
    padding: 0px 28px;
    padding-bottom: 15px;
  }

  .singerd-header .singer-header-title {
    line-height: 52px;
    color: #666;
    /* font-weight: 600; */
    font-size: 12px;
  }

  .singerd-header .singer-header-info {
    width: 100%;
    display: flex;
  }

  .singer-header-info .singer-header-info-left {
    width: 198px;
    height: auto;
    overflow: hidden;
  }

  .singer-header-info-left img {
    width: 198px;
    height: 198px;
    display: block;
  }

  .singer-header-info .singer-header-info-right {
    flex: 1;
    height: auto;
    padding-left: 20px;
  }

  .singer-header-info-right .singer-header-info-name {
    line-height: 32px;
    color: #000;
    font-size: 20px;
  }

  .singer-header-info-right .singer-header-info-text {
    padding-top: 30px;
  }

  .singer-header-info-text p {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #333333;
  }

  .singer-header-info-text p i {
    font-size: 18px;
    color: #929294;
    margin-right: 3px;
  }

  .singer-header-info-text p span {
    color: #999999;
  }

  .singerd-container {
    flex: 1;
    width: 100%;
    padding: 0px 28px;
    position: relative;
    overflow: hidden;
  }

  >>>.el-tabs__nav-wrap::after {
    height: 1px;
  }

  /* 热门单曲 */
  /* 热门单曲上面的播放全部 */
  .playall{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
  }
  .playall {
    padding: 0px 12px;
    display: flex;
    align-items: center;
  }
  .playall div{
    margin-right: 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }
  .playall div:nth-of-type(2){
    border-right: 1px solid #E4E4E7;
    width: 1px;
    height: 16px;
    margin-right: 10px;
    margin-left: 5px;
  }
  .playall div>i{
    font-size: 20px;
    color: #333;
    margin-right: 5px;
  }
  .playall div:nth-of-type(1)>i{
    color: #DF3B3B;
  }

  /* 热门单曲下面的单曲列表 */
  .singerd-hot ul li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0px 12px;
  }

  .singerd-hot ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .singerd-hot ul li:hover {
    background-color: #F2F2F3;
  }

  .singerd-hot ul li div {
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
  }

  .singerd-hot ul li .music-list-index {
    width: 36px;
    justify-content: center;
    font-size: 13px;
  }

  .singerd-hot ul li .music-list-detail {
    width: 28px;
    height: 100%;
    color: #999;
    font-size: 16px;
  }

  .singerd-hot ul li .music-list-song {
    flex: 1;
    font-size: 14px;
  }

  .singerd-hot ul li .music-list-singer {
    flex: 0.8;
    color: #999999;
  }

  .singerd-hot ul li .music-list-album {
    flex: 0.5;
    color: #999999;
    padding-right: 20px;
  }

  .singerd-hot ul li .music-list-time {
    flex: 0.2;
    color: #999999;
  }

  /* 专辑 */
  .singerd-zj ul{
    display: flex;
    flex-wrap: wrap;
  }
  .singerd-zj ul li {
    width: 124px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .singerd-zj ul li img{
    width: 124px;
    height: 124px;
    display: block;
  }
  .singerd-zj ul li P:nth-of-type(1){
    font-size: 14px;
    color: #333333;
    line-height: 26px;
  }
  .singerd-zj ul li P:nth-of-type(2){
    font-size: 12px;
    color: #999999;
  }

  /* mv */
  .singerd-mv ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .singerd-mv ul li{
    width: 272px;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
  }
  .singerd-mv ul li .singerd-mv-img{
    width: 100%;
    height: 154px;
    overflow: hidden;
    border: 1px solid #E4E4E7;
    position: relative;
  }
  .singerd-mv ul li .singerd-mv-img img{
    display: block;
    width: 100%;
  }
  .singerd-mv ul li p:nth-of-type(1){
    font-size: 14px;
    color: #000;
    line-height: 26px;
  }
  .singerd-mv ul li p:nth-of-type(2){
    font-size: 12px;
    color: #999999;
    line-height: 20px;
  }

  /* 歌手详情 */
  .singerd-detail span{
    display: block;
    padding: 20px 0 10px 0;
    position: sticky;
    top: 0;
    overflow: hidden;
    font-weight: bold;
    background-color: #FAFAFC;
  }
  .singerd-detail p{
    line-height: 26px;
    font-size: 12px;
    color: #000;
    margin: 10px 0;
    text-indent: 2em;
    text-align: justify;
  }
</style>
